<template>
  <view class="nav-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <button @click="goBack">返回</button>
      <text>导航到 {{ destName }}</text>
      <button @click="moreAction">更多</button>
    </view>

    <!-- 地图区域：用 uni 内置 map 组件展示目的地 -->
    <map
      class="map-container"
      :longitude="destLongitude"   
      :latitude="destLatitude"     
      :scale="16"                 
      :markers="markers"           
      :show-location="true"       
    ></map>

    <!-- 底部：目的地信息 + 导航按钮 -->
    <view class="bottom-bar">
      <view class="address-info">
        <text class="title">{{ destName }}</text>
        <text class="detail">{{ destAddress }}</text>
      </view>
      <button class="nav-btn" @click="openSystemNavigation">
        <uni-icons type="location-filled" color="#fff"></uni-icons>
        开始导航
      </button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      destLongitude: 0,  // 目的地经度
      destLatitude: 0,   // 目的地纬度
      destName: "",      // 目的地名称
      destAddress: "",   // 目的地地址
      markers: []        // 地图标记点（用于标记目的地）
    };
  },
  onLoad(options) {
    // 从 URL 参数中接收店铺页传递的信息
    this.destLongitude = parseFloat(options.longitude || "113.264535"); // 若无参数，用默认经纬度
    this.destLatitude = parseFloat(options.latitude || "23.155477");
    this.destName = options.name || "车百事汽车生活馆";
    this.destAddress = options.address || "山阳区人民路与解放路口";

    // 初始化地图标记点（标记目的地）
    this.markers = [
      {
        id: 1,
        longitude: this.destLongitude,
        latitude: this.destLatitude,
        title: this.destName,
        width: 30,   // 标记点宽度
        height: 30,  // 标记点高度
        iconPath: "/static/car_wash/location-marker.png" // 可选：自定义标记图标（需自备图片）
      }
    ];
  },
  methods: {
    // 返回上一页（店铺页）
    goBack() {
      uni.navigateBack();
    },
    // 更多操作（如切换地图类型，可选）
    moreAction() {},
    // 唤起系统地图进行导航
    openSystemNavigation() {
      uni.openLocation({
        longitude: this.destLongitude,
        latitude: this.destLatitude,
        name: this.destName,
        address: this.destAddress,
        scale: 18, // 打开地图时的缩放级别
        success: () => {
          console.log("唤起系统导航成功");
        },
        fail: (err) => {
          uni.showToast({
            title: "唤起导航失败，请检查权限",
            icon: "none"
          });
          console.error(err);
        }
      });
    }
  }
};
</script>
<style scoped>
.nav-page {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满屏幕高度 */
}

.top-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.top-bar button {
  background: transparent;
  border: none;
}

.map-container {
  flex: 1; /* 占满剩余高度 */
  width: 100%;
}

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.address-info {
  flex: 1;
  margin-right: 12px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
}

.detail {
  font-size: 14px;
  color: #666;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007AFF;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
}

.nav-btn uni-icons {
  margin-right: 4px;
}
</style>